<template>
  <!-- 富文本编辑器 -->
  <quillEditor
    ref="mwQuillEditor"
    v-model="html"
    :options="editorOption"
  ></quillEditor>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor, Quill } from 'vue-quill-editor'
import hljs from 'highlight.js'

// 设置字体大小
const fontSizeStyle = Quill.import('attributors/style/size') // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = [
  '12px',
  '14px',
  '16px',
  '18px',
  '20px',
  '24px',
  '28px',
  '32px',
  '36px'
]
Quill.register(fontSizeStyle, true)

// 设置字体样式
const Font = Quill.import('attributors/style/font') // 引入这个后会把样式写在style上
const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']
Font.whitelist = fonts // 将字体加入到白名单
Quill.register(Font, true)

// 工具栏
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
  ['blockquote', 'code-block'], // 引用  代码块
  // [{ direction: 'rtl' }], // 文本方向
  // [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
  // [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
  // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  // [{ font: ['songti'] }], // 字体种类
  // [{ align: [] }], // 对齐方式
  ['image', 'link'] // 视频 链接
  // ['clean'] // 清除文本格式
]

export default {
  components: {
    quillEditor
  },
  props: { value: { type: [Number, Object, Array, String], default: '' } },
  data () {
    return {
      html: this.value,
      editorOption: {
        placeholder: '',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: this.handleImgUpload
            }
          },
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        }
      },
      isShow: false,
      props: {
        answer: {
          type: [String, Number],
          required: true
        },
        question: {
          type: [String, Number],
          required: true
        }
      }
    }
  },
  watch: {
    html: {
      handler (newValue) {
        this.$emit('input', newValue)
      },
      deep: true
    },
    value: {
      handler (newValue, oldValue) {
        if (newValue !== oldValue) this.html = newValue
      },
      deep: true
    }
  },
  mounted () {
    this.initMounted()
  },
  methods: {
    initMounted () {
      setTimeout(() => {
        this.isShow = true
      }, 100)
    },
    handleImgUpload () {
      const { quill } = this.$refs.mwQuillEditor
      SelectImages({
        visible: true,
        multi: true,
        showButton: true,
        maxMulti: 18,
        success: (data, filPath) => {
          for (const item of data) {
            const length = quill.getSelection(true).index
            // 获取光标所在位置
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', filPath + item)
            // 调整光标到最后
            quill.setSelection(length + 1)
          }
        }
      })
    }
  }
}
</script>

<style></style>
